<template>
    <div class="action-wrapper">

      <Dropdown trigger="click" transfer>
        <a href="javascript:void(0)" style="text-wrap: nowrap;">
          全部操作
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
          <DropdownMenu>
            <div class="operbtn-wrap" :style="{width:btnWidth}">
            <div v-for="(op, index) in showOpList" class="operbtn-item">
            <span
                :key="op.key"
                :style="{
                    color: !getDisStatus(op) && op.setColor ? op.setColor(row) : ''
                }"
                :class="{
                    delete: op.type === 'delete',
                    pointer: !getDisStatus(op),
                    'not-allowed':getDisStatus(op)
                }"
                @click="(e) => handleClick(e,op)"
            >{{ getTxt(op) }}</span
            >
              <Divider
                  v-if="index < showOpList.length - 1"
                  :key="index"
                  type="vertical"
                  style="background:hsla(0,0%,100%,.12)"
              ></Divider>
            </div>
            </div>
          </DropdownMenu>
        </template>
      </Dropdown>
      
     
    </div>
</template>
<script>
export default {
    name: 'Action',
    props: {
        column: {
            type: Object,
            default: () => {}
        },
        row: {
            type: Object,
            default: () => {}
        },
        index: Number
    },
    data(){
      return {
        visible:false
      }
      
    },
    inject:['tableRoot'],
    computed: {
        showOpList() {
            return this.column.opList && this.column.opList.filter((op) => typeof op.show === 'function' ?  op.show(this.row) : !op.show);
        },
        btnWidth(){
          return this.column.foldWidth ||'300px'
        }
    },
    watch:{
        showOpList(val){
            // console.log(this.tableRoot.$refs.t)
            // let width = val.map(item => this.getTxt(item)).reduce((arr,current,index) => {
            //     return [...arr,current]
            // },[]).join('').length * 12 + (val.length * 9)
            // this.column.width = ''
            // this.$set(this.tableRoot.columnsWidth[Object.keys(this.tableRoot.columnsWidth).length - 1],width,width)
            // // this.tableRoot.$parent.columnsWidth[Object.keys(this.tableRoot.columnsWidth).length - 1].width = width
            // console.log(this.tableRoot.$parent.useColumns)
            // this.tableRoot.$parent.useColumns[Object.keys(this.tableRoot.columnsWidth).length - 1].width = width
        }
    },
    methods: {
        getDisStatus(op) {
            if (op.disabled && typeof op.disabled === 'function') {
                return op.disabled(this.row);
            } else {
                return op.disabled
            }
        },
        getDropdownList(op) {
            if (Array.isArray(op.dropdownList)) {
                return op.dropdownList;
            } else {
                return typeof op.dropdownList === 'function' ? op.dropdownList(this.row) : [];
            }
        },
        getCurrent(op) {
            if (typeof op.current === 'function') {
                return op.current(this.row);
            } else {
                return op.current ? op.current : this.getDropdownList(op)[0];
            }
        },
        getTxt(op) {
            if (typeof op.txt === 'function') {
                return op.txt(this.row);
            } else {
                return op.txt;
            }
        },
        getTitle(op){
            if (typeof op.title === 'function') {
                return op.title(this.row);
            } else {
                return op.title;
            }
        },
        getTooltip(op) {
            if (typeof op.tooltip === 'function') {
                return op.tooltip(this.row);
            } else {
                return op.tooltip;
            }
        },
        handleClick(e, op, name) {
          if (!this.getDisStatus(op)) {
            if (op.tooltip) {
              this.$Modal.confirm({
                title: op.title,
                onOk: () => {
                  this.clickAction(e, op, name)
                }
              });
            }else {
                this.clickAction(e, op, name)
            }
          }
        
        },
        clickAction(e, op, name){
            if(name){
              op.fun ? op.fun(this.row,name,e) : op.on.click(this.row,name,e);
            }else{
              op.fun ? op.fun(this.row,e) : op.on.click(this.row,e);
            }
        }
        
    }
};
</script>
<style scoped>
.pointer {
    cursor: pointer;
    color: var(--operation-useable);
}
.not-allowed {
    cursor: not-allowed;
    color: var(--operation-unuseable);
}
.pointer.delete {
    color: var(--operation-del);
}
.table-dropdown:hover {
    background: var(--select-content-bgcolor);
}
.action-wrapper /deep/ .ivu-divider, .ivu-divider-vertical {
    margin:0 4px;
}

.operbtn-wrap{
  display: flex;
  height: auto;
  flex-wrap: wrap;
  padding:4px 0 0 20px;
  justify-content: flex-start;
}
.operbtn-item{
  height: 26px;
}



</style>
